<template>
  <el-container v-loading="isloading2">
    <el-header style="padding: 0; height: 100%">
      <table-header
        ref="header"
        :filename="name"
        @keychange="keychange"
        @cityChange="cityChange"
        @areaChange="areaChange"
        @getData="downloadlist"
      >
        <template v-slot:downDiv>
          <div class="slot-upload">
            <el-button type="primary" @click="openUploadDialog"
              >批量上传</el-button
            >
            <div class="downButton" @click="downloadsuo">
              <i class="el-icon-download"></i>下载圆周率文件智能锁
            </div>
          </div>
        </template>
      </table-header>
    </el-header>
    <el-dialog
      title="上传材料"
      :visible.sync="isDialogShow"
      width="30%"
      :append-to-body="true"
      class="dialog1"
    >
      <el-upload
        class="upload-demo demo1"
        action=""
        :limit="1"
        :http-request="sdsc1"
        :show-file-list="true"
        :file-list="fileList1"
      >
        <el-button size="small" type="primary">设备信息附件上传</el-button>
        <div slot="tip" class="el-upload__tip"></div>
      </el-upload>
      <el-upload
        class="upload-demo demo1"
        action=""
        :limit="1"
        :http-request="sdsc2"
        :show-file-list="true"
        :file-list="fileList2"
      >
        <el-button size="small" type="primary">中标附件上传</el-button>
        <div slot="tip" class="el-upload__tip"></div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="send">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 批量上传材料 -->
    <el-dialog
      title="批量上传材料"
      :visible.sync="isUploadDialogShow"
      width="30%"
      :append-to-body="true"
      class="dialog1"
    >
      <el-cascader
        v-model="citySelected"
        :options="citylist"
        :props="props"
        clearable
        :show-all-levels="false"
        @change="handleChange"
      ></el-cascader>
      <el-upload
        class="upload-demo demo1"
        action=""
        :limit="1"
        :http-request="sdsc1"
        :show-file-list="true"
        :file-list="fileList1"
      >
        <el-button size="small" type="primary">设备信息附件上传</el-button>
        <div slot="tip" class="el-upload__tip"></div>
      </el-upload>
      <el-upload
        class="upload-demo demo1"
        action=""
        :limit="1"
        :http-request="sdsc2"
        :show-file-list="true"
        :file-list="fileList2"
      >
        <el-button size="small" type="primary">中标附件上传</el-button>
        <div slot="tip" class="el-upload__tip"></div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="send">确 定</el-button>
      </span>
    </el-dialog>
    <el-main>
      <!-- :tableData="result.slice((curPage - 1) * pageSize, curPage * pageSize)" -->
      <el-table
        :data="tableData"
        stripe
        @sort-change="sortChange"
        v-loading="isloading"
        border
        style="width: 100%"
        class="eltable"
      >
        <el-table-column label="序号" width="100" type="index" />
        <el-table-column prop="city" label="所属市" width="150" />
        <el-table-column prop="country" label="所属区县" width="150" />
        <el-table-column prop="town" label="所属乡镇" width="180" />
        <el-table-column prop="village" label="村庄名" />
        <el-table-column
          prop="villageType"
          label="村庄类型"
          width="180"
          sortable
        />
        <el-table-column
          prop="planType"
          label="规划编制类型"
          width="180"
          sortable
        />

        <el-table-column label="操作 (设备信息附件、中标合同附件)">
          <template slot-scope="scope">
            <el-button
              type="text"
              class="elbutton"
              v-if="!scope.row.isAgree"
              @click="uploadv(scope)"
              >申请</el-button
            >

            <span v-else style="color: green">已授权</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="completionYear"
          label="完成时限"
          width="200"
          sortable
        />
      </el-table>
      <el-pagination
        v-if="tableData.length > 0"
        class="elpagi"
        :total="total"
        @size-change="getdata"
        @current-change="getdata"
        @prev-click="getdata"
        @next-click="getdata"
        :current-page.sync="listquery.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="listquery.pageSize"
        layout="total,sizes, prev, pager, next, jumper"
      />
    </el-main>
  </el-container>
</template>
<script>
import tableHeader from "../components/TableHeader";
import {picHost} from '@/settings.js'
import openMixin from "@/mixins/open.js";
import { dataagreenolist, apply, downloadapplyfile } from "@/api/index.js";
import {
  mapGetters
} from 'vuex'
export default {
  components: {
    tableHeader,
  },
    computed: {
    ...mapGetters([
      'citylist',
    ])
  },
  data() {
    return {
      listquery: {
        pageSize: 10,
        currentPage: 1,
        city: null,
        country: null,
        key: "",
        sortby: null,
        sortorder: null,
      },
      isloading2: false,
      isloading: false,
      name: "数据申请表",
      total: 0,
      id: "",
      tablelist: [],
      list: [],
      fileList2: [],
      fileList1: [],
      isDialogShow: false,
      city: "",
      country: "",
      tableData: [],
      downloadurl: "",
      isUploadDialogShow: false,
      citySelected: null,
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          console.log(node);
          let level  = node.level
          if (level>2) {
            
          }
          resolve(node.children)
        },
        multiple: true,
        expandTrigger: "hover",
      },
    };
  },
  mounted() {
    this.getdata();
    downloadapplyfile().then((res) => {
      this.downloadurl = res;
    });
  },

  methods: {
    keychange(data) {
      this.listquery.key = data;
      this.listquery.currentPage = 1;
      this.getdata();
    },
    downloadsuo() {
      window.open(picHost + this.downloadurl);
    },
    downloadlist() {
      this.isloading2 = true;
      let query = {
        pageSize: 99999,
        currentPage: 1,
        city: this.listquery.city,
        country: this.listquery.country,
        key: this.listquery.key,
        sortby: null,
        sortorder: null,
      };
      dataagreenolist(query).then((res) => {
        this.$refs.header.downloadExcel(res.content);
        this.isloading2 = false;
      });
    },
    cityChange(data) {
      this.listquery.city = data;
      this.listquery.country = null;
      this.listquery.currentPage = 1;
      this.getdata();
    },
    areaChange(data) {
      this.listquery.city = data.city;
      this.listquery.country = data.country;
      this.listquery.currentPage = 1;
      this.getdata();
    },
    fileChange(e) {
    },
    async getdata() {
      this.isloading = true;
      let res = await dataagreenolist(this.listquery);
      this.tableData = res.data.content;
      this.total =  res.data.totalElements;
      this.isloading = false;
    },
    //表格属性排序
    sortChange(data) {
      const { prop, order } = data;
      this.listquery.sortby = prop;
      this.listquery.sortorder = order;
      this.getdata();
    },

    sdsc1(data) {
      this.list.unshift(data.file);
    },
    sdsc2(data) {
      this.list.push(data.file);
    },
    send() {
      if (this.list.length === 1) {
        alert("请将材料补充齐全");
      }
      if (this.list.length === 2) {
        var data = new FormData();
        this.list.map((v) => {
          data.append("files", v);
        });
        data.append("ids", this.id);
        apply(data).then((v) => {
          if (v == "1") {
            this.$notify({
              title: "成功",
              message: "上传成功",
              type: "success",
            });
          } else {
            this.$notify.error({
              title: "错误",
              message: "上传错误",
            });
          }
        });

        this.isDialogShow = false;
      } else {
        return;
      }
    },
    uploadv(scope) {
      this.list = [];
      this.fileList1 = [];
      this.fileList2 = [];
      this.isDialogShow = true;
      this.id = scope.row.id;
    },
    handleRemove(file, fileList) {
    },
    handlePreview(file) {
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //打开批量上传弹窗
    openUploadDialog() {
      this.isUploadDialogShow = true;
    },
    //批量上传
    handleChange() {},
  },
};
</script>
<style lang="scss" scoped>
@import "../../../../public/css/table.scss";
.downButton {
  background-color: #96cdcd;

  border-radius: 5px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  padding: 0px 15px;
  letter-spacing: 1px;
  cursor: pointer;
  &:hover {
    background-color: #4cc8c7;
  }
  margin-left: 80px;
}
.demo1 {
  margin-bottom: 15px;
}
::v-deep .el-dialog__body {
  padding: 10px 20px;
}
.slot-upload {
  display: flex;
}
</style>
